<template>
  <div class="phone-container">
    <span class="title">账号登录</span>
    <el-form
      ref="ruleFormRef"
      :model="accountForm"
      label-width="60px"
      :rules="rules"
    >
      <el-form-item label="账号:" prop="account">
        <el-input
          v-model="accountForm.account"
          :prefix-icon="User"
          size="large"
          placeholder="请输入账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input
          v-model="accountForm.password"
          :prefix-icon="Postcard"
          size="large"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          label="我已阅读并同意用户协议和隐私条款"
          name="type"
          v-model="checked"
        ></el-checkbox>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      class="login-btn"
      @click="accountLogin"
      :loading="loginLoding"
      >登录/注册</el-button
    >
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { User, Postcard } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { loginByAccountRequest } from "@/service/user-login";
import Cache from "@/utils/Cache";
export default {
  setup() {
    const ruleFormRef = ref();
    let accountForm = reactive({
      account: "13937117595",
      password: "123456",
    });
    let rules = reactive({
      account: [
        { required: true, message: "账号不能为空", trigger: "change" },
        {
          pattern: /^1[3|5|7|8|9]\d{9}$/,
          message: "请输入正确的账号格式",
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: "密码不能为空", trigger: "change" },
        { min: 5, max: 15, message: "密码在5-15个字符之间", trigger: "blur" },
      ],
    });
    let checked = ref(true);
    let loginLoding = ref(false);
    const router = useRouter();
    const store = useStore();

    // 登录按钮逻辑
    const accountLogin = () => {
      ruleFormRef.value.validate((valid) => {
        if (!valid) {
          ElMessage({
            message: "登录失败,账号或密码格式错误!",
            type: "error",
            center: true,
          });
          return;
        }
        if (!checked.value) {
          ElMessage({
            message: "登录失败,请先勾选相关协议!",
            type: "error",
            center: true,
          });
          return;
        }
        handleLogin();
      });
    };
    // 发送登录请求
    const handleLogin = async () => {
      loginLoding.value = true;
      try {
        const res = await loginByAccountRequest(accountForm);
        console.log(res.data);
        Cache.saveItem("token", res.data.token);
        store.commit("setAccount", res.data.account);
        ElMessage({
          message: "登录成功!",
          type: "success",
          center: true,
        });
        router.push("/");
      } catch (err) {
        ElMessage({
          message: "登录失败,账号或密码错误!",
          type: "error",
          center: true,
        });
      }
      loginLoding.value = false;
    };
    return {
      accountForm,
      checked,
      User,
      Postcard,
      rules,
      accountLogin,
      ruleFormRef,
      loginLoding,
    };
  },
};
</script>

<style lang="less" scoped>
.phone-container {
  transform: translateZ(70px);
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #409eff;
  }
  .el-form {
    width: 300px;
    height: 150px;
  }

  .login-btn {
    width: 250px;
    height: 40px;
    margin-top: 10px;
  }
}
</style>
